<template>
	<view>
		<!-- 1，标题导航栏 -->
		<search-head :activeId="activeId" @changeActive="changeActive"></search-head>
		<!-- 2，搜索框 -->
		<view class="search-box">
			<uni-search-bar v-model="kw" @confirm="getSearchList" :radius="100" cancelButton="none"
				placeholder="查找搜索好友">
			</uni-search-bar>
		</view>
		<!-- 3，搜索历史 -->
		<view class="history-box">
			<!-- 标题区域 -->
			<view class="history-title">
				<text>搜索历史</text>
				<uni-icons type="trash" size="17" @click="clean"></uni-icons>
			</view>
			<!-- 列表区域 -->
			<view class="history-list">
				<uni-tag :text="item" v-for="(item,index) in histories" :key="index" @click="changeSearchInput(item)">

				</uni-tag>
			</view>
		</view>

		<!-- 搜索建议列表 -->
		<view class="sugg-list" v-if="searchResults.length !== 0">
			<search-item :searchResults="searchResults"></search-item>
		</view>
	</view>
</template>

<script>
	//导入子组件
	import searchHead from './child/search-head.vue'
	import searchItem from './child/search-item.vue'
	
	import uniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue'
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	import uniTag from '@/uni_modules/uni-tag/components/uni-tag/uni-tag.vue'

	import {
		searchByFriend
	} from '@/api/http/msg/search.js'

	export default {
		components: {
			searchHead,
			searchItem,
			
			uniSearchBar,
			uniIcons,
			uniTag
		},
		data() {
			return {
				activeId: 1, // 1，查询好友；2，查询家族
				kw: null,
				histories: [],
				searchResults: []
			}
		},
		methods: {
			//1，修改查询对象
			changeActive(i) {
				this.activeId = i
			},
			//2，搜索对象
			getSearchList(e) {
				this.kw = e.value
				//判断搜索关键词是否为空
				if (this.kw.length === 0) {
					this.searchResults = []
					return
				}
				if (this.kw == uni.getStorageSync("username") || this.kw == uni.getStorageSync("phone")) {
					return uni.$showMsg('无法搜索自己的账号！')
				}
				var that = this
				searchByFriend(this.kw, this.activeId).then(res => {
					if (res.data.pubInfo.code !== 0) return uni.$showMsg(res.data.pubInfo.message)

					//数据处理
					var searchData = res.data.busInfo
					//console.log(searchData)
					if (searchData.length == 0) {
						return
					}

					for (var i = 0; i < searchData.length; i++) {
						if (i == 0) {
							continue;
						}
						if (searchData[i].title == searchData[i - 1].title) {
							searchData[i].title = ''
						}
					}

					that.searchResults = searchData
				})

				this.saveSearchHistory()
			},
			saveSearchHistory() {
				//this.historyList.push(this.kw)

				//1，将array数组转化为set对象
				const set = new Set(this.historyList)
				//2，调用set对象的delete方法，移除对应的元素
				set.delete(this.kw)
				//3，调用set对象的add方法，向set中添加元素
				set.add(this.kw)
				//4，将set对象转化为array数组
				this.historyList = Array.from(set)

				//对搜索历史数据进行持久化存储
				uni.setStorageSync('kw', JSON.stringify(this.historyList))
			},
			clean() {
				this.historyList = []
				uni.setStorageSync('kw', '[]')
			},
			changeSearchInput(item) {
				//console.log(item)
				this.kw = item
			},
		}
	}
</script>

<style scoped lang="scss">
	.history-box {
		padding: 0 5px;

		.history-title {
			display: flex;
			justify-content: space-between;
			height: 40px;
			align-items: center;
			font-size: 13px;
			border-bottom: 1px solid #efefef;
		}

		.history-list {
			display: flex;
			flex-wrap: wrap;

			.uni-tag {
				margin-top: 5px;
				margin-right: 5px;
				background-color: #FFFFFF;
				border: none;
				color: #000000;
			}
		}
	}
</style>
